import { Link } from "react-router-dom"
import Bottom from "../components/bottom/Bottom"
import { Top } from "../components/top/Top"
import "./Main.css"
import { useState } from "react"
import { productService } from "../../service/productService"

export default function Main() {
   

    return (
        <>
            <Top />
            <div className="container">
                <CategoriesSidebar />
                <CategoriesContent />
            </div>
            <Bottom />
        </>
    );
}

function CategoriesCyele({ categoryId, x, y, radius, onMouseEnter, onMouseLeave ,event}) {
    const getBackgroundImage = () => {
        const images = {
            Birds: require("../../images/bird1.gif"),
            Fish: require("../../images/fish1.gif"),
            Dogs: require("../../images/dog1.gif"),
            Cats: require("../../images/cat1.gif"),
            Reptiles: require("../../images/dog1.gif")
        };
        return images[categoryId];
    };

    const styles = {
        position: "absolute",
        left: `${x}px`,
        top: `${y}px`,
        width: `${radius * 2}px`,
        height: `${radius * 2}px`,
        borderRadius: `${radius}px`,
        backgroundSize: 'cover',
        backgroundPosition: 'center',
        cursor: 'pointer'
    };

    return (
        <Link to={`/categories/${categoryId}/products`}>
            <div 
                style={styles} 
                className="cyele"
                onMouseEnter={(e) => onMouseEnter(categoryId,x,y,radius,e)}
                onMouseLeave={onMouseLeave}
            ></div>
        </Link>
    );
}
function CategoriesSidebar(){

    return(
        <ul className="categories-sidebar">
                    <li>
                        <img src={require("../../images/sm_birds.gif")} alt="Birds" /><br />
                        <Link to="/categories/BIRDS/products">Exotic Varieties</Link>
                    </li>
                    <li>
                        <img src={require("../../images/sm_cats.gif")} alt="Cats" /><br />
                        <Link to="/categories/CATS/products">Various Breeds,</Link>
                        <Link to="/categories/CATS/products">Exotic Varieties </Link>
                    </li>
                    <li>
                        <img src={require("../../images/sm_dogs.gif")} alt="Dogs" /><br />
                        <Link to="/categories/DOGS/products">Various Breeds</Link>
                    </li>
                    <li>
                        <img src={require("../../images/sm_fish.gif")} alt="Fish" /><br />
                        <Link to="/categories/FISH/products">Saltwater, </Link>
                        <Link to="/categories/FISH/products">Freshwater</Link>
                    </li>
                    <li>
                        <img src={require("../../images/sm_reptiles.gif")} alt="Reptiles" /><br />
                        <Link to="/categories/REPTILES/products">Lizard, </Link>
                        <Link to="/categories/REPTILES/products">Turtle, </Link>
                        <Link to="/categories/REPTILES/products">Snakes</Link>
                    </li>
                </ul>
    )
}
function CategoriesContent(){
    const [hoveredCategory, setHoveredCategory] = useState(null); // 存储动态获取的数据
    const [popupPosition, setPopupPosition] = useState(null); // 存储悬浮窗位置信息

    const handleMouseEnter = (categoryId, x, y, radius, event) => {
        const element = event.currentTarget; // 获取触发事件的元素（即 CategoriesCyele 的 div）
        const rect = element.getBoundingClientRect(); // 获取元素在视口中的位置
    
        // 动态获取动物数据
        productService.getProducts(categoryId, function (response) {
            setPopupPosition({
                x: rect.left + window.scrollX, // 转换为视口坐标
                y: rect.top + window.scrollY + rect.height, // 放在图片下方
                radius
            });
            setHoveredCategory(response.data);
        });
    };

    const handleMouseLeave = () => {
        setPopupPosition(null);
        setHoveredCategory(null); // 清空悬浮数据
    };


    return (
        <>
            <div className="categories-content">
                {["BIRDS", "FISH", "DOGS", "REPTILES", "CATS", "BIRDS"].map((cat, i) => (
                    <CategoriesCyele
                        key={i}
                        categoryId={cat}
                        x={[80, 0, 50, 140, 230, 280][i]}
                        y={[50, 170, 240, 260, 240, 175][i]}
                        radius={[100, 40, 40, 40, 40, 40][i]}
                        onMouseEnter={handleMouseEnter}
                        onMouseLeave={handleMouseLeave}
                    />
                ))}
            </div>

            {hoveredCategory && popupPosition && (
                <div
                    className="popup-menu"
                    style={{
                        left: `${popupPosition.x + 10}px`,
                        top: `${popupPosition.y + 10}px`
                    }}
                >
                    {hoveredCategory.map((item, index) => (
                        <div key={index} className="popup-item">
                            <div className="popup-bullet">•</div>
                            <div className="popup-name">{item.name}</div>
                            <div className="popup-image">
                                <img src={require(`../../images/${item.image}`)} alt={item.name} />
                            </div>
                            {item.description && (
                                <div className="popup-description">{item.description}</div>
                            )}
                        </div>
                    ))}
                </div>
            )}
        </>
    );
}